<template>
  <div>
<!--      {{$t('el.carousel.indicator', {index:'22222'})}}-->
<!--      {{$t('router.menuManagement')}}-->
<!--      {{$t('el.breadcrumb.label')}}-->
<!--      {{$t('router.permissionManagement')}}-->
    <el-card class="card-full">
      <template #header>
        <div class="font-normal">
          <span
            class="pr-8 cursor-pointer"
            :class="{ 'font-bold': formData.type === 1 }"
            @click="formData.type = 1"
          >
            发布视频
          </span>
          <span
            class="cursor-pointer"
            :class="{ 'font-bold': formData.type == 2 }"
            @click="formData.type = 2"
          >
            发布至合集
          </span>
        </div>
      </template>

      <upload
        v-model="formData.fileUrl"
        accept="video/*"
        :file-size="2 * 1024"
        height="calc(100vh - 390px)"
      >
        <template #upload-text>点击上传或直接将视频文件拖入此区域</template>
      </upload>

      <el-row class="my-14" align="middle" justify="space-between">
        <el-col :span="5" :offset="3">
          <div class="text-[#222] pb-1 text-base">视频大小</div>
          <div class="text-gray-400">支持大小2G</div>
        </el-col>
        <el-col :span="5" :offset="3">
          <div class="text-[#222] pb-1 text-base">视频格式</div>
          <div class="text-gray-400">mp4/mov/avi</div>
        </el-col>
        <el-col :span="5" :offset="3">
          <div class="text-[#222] pb-1 text-base">视频分辨率</div>
          <div class="text-gray-400">分辨率1080P以上</div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, computed } from "vue"
import Upload from "@/components/upload.vue"

const formData = reactive({
  type: 1,
  fileUrl: "",
})
</script>

<style lang="scss" scoped></style>
